<template>
  <div class="about">
    <div>
      <el-row>
        <el-col :span="2">
          <el-button @click="fn1">添加</el-button>
        </el-col>
        <el-col :span="16">
          &nbsp;

        </el-col>
        <el-col :span="4">
          <el-row>
            <el-col :span="19">
              <el-input v-model="params.name" placeholder="请输入内容"></el-input>
            </el-col>
            <el-col :span="1">
              &nbsp;

            </el-col>
            <el-col :span="4">
              <el-button icon="el-icon-search" type="primary" @click="xg">搜索</el-button>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="id" label="id">
        </el-table-column>
        <el-table-column prop="name" label="系名">
        </el-table-column>
        <el-table-column prop="majorCount" label="专业数">
        </el-table-column>
        <el-table-column prop="teacherCount" label="教师数">
        </el-table-column>
        <el-table-column label="操作" width="150">
          <template slot-scope="scope"> <!-- 或者使用 v-slot:default="scope" -->
            <el-button type="success" size="mini">编辑</el-button>
            <el-button type="danger" @click="dele(scope.row.id)" size="mini">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination :current-page="page" @current-change="currentChange" style="margin-top: 24px; text-align: center;"
      background layout="prev, pager, next" :total="totr">
    </el-pagination>
    <el-dialog title="编辑" :visible.sync="dialogFormVisible">
      <el-form :model="form" label-width="120px" ref="form">
        <el-form-item label="系名" prop="name" :rules="[{ required: true, message: '请输入系名', trigger: 'blur' }]">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="fn2">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { Department, Departmentxg, addepartment, deleteDepartment } from '@/api'
export default {
  data() {
    return {
      input: '',
      tableData: [],
      params: {
        name: '',

      },
      totr: 0,
      page: 1,
      dialogFormVisible: false,
      form: {
        name: '',
        id: -1
      },

    }
  },
  methods: {
    dele(id) {
      deleteDepartment(id).then(res => {
        if (res.code === 0) {
          this.$message({
            message: '删除成功',
            type: 'success'
          });
          this.getDepartment()
        }
      })
    },
    fn1() {
      this.dialogFormVisible = true
    },
    fn2() {
      console.log(this.form);
      this.$refs['form'].validate(v => {
        if (v) {
          console.log(this.form);
          addepartment(this.form).then(res => {
            // console.log(res, 'res22154545');

            if (res.code === 0) {
              this.$message({
                message: '添加成功',
                type: 'success'
              });
              this.dialogFormVisible = false
              this.getDepartment()
            }
          })
        }
        console.log(v);
      })
    },
    // 获取数据
    getDepartment() {
      Department(this.params, this.page).then(res => {
        // this.tableData = res.data
        console.log(res, "dfsafdsag");
        if (res.code === 0) {
          this.tableData = res.data
        }
      })
    },
    //搜索
    xg() {
      this.getDepartment()
      this.page = 1
      this.getDepartmentxg()

      // console.log(this.params);


    },
    // 获取页数
    getDepartmentxg() {
      Departmentxg(this.params).then(res => {
        console.log(res, "YES");
        if (res.code === 0) {
          this.totr = res.data * 10
        }
      })
    },
    // 分页
    currentChange(v) {
      // console.log(v);
      this.page = v
      this.getDepartment()
    }

  },
  mounted() {
    this.getDepartment()
    this.getDepartmentxg()

  }
}

</script>

<style>
.about {
  height: 100%;
}
</style>
